import { createRouter, createWebHistory } from 'vue-router'
import HomeView from '../views/HomeView.vue';
import Login from "../views/login.vue";



import videoDetail from '../views/VideoDetail.vue';
import videoUpload  from '../views/VideoUpload.vue';
import my from '../views/me.vue';


const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes: [
    {
      path: '/',
      name: 'home',
      component: HomeView,
    },

{
      path: '/login',
      name: 'login',
      component: Login,
    },


      {
          path: '/video/:id',
          name: 'video',
          component: videoDetail,
          props: true
      },


      {
          path: '/upload',
          name: 'upload',
          component: videoUpload
      },

      {
          path: '/me/:id',
          name: 'me',
          component: my
      }


  ],
})




router.beforeEach((to, from, next) => {
    const token = localStorage.getItem('token');
    const whitelist = ['/login'];

    if (whitelist.includes(to.path)) {
        // 白名单页面直接放行
        return next();
    }

    if (!token) {
        // 未登录跳转登录页
        return next('/login');
    }

    // 已登录放行
    next();
});
export default router;




//异步加载 提高性能
// import {defineAsyncComponent} from "vue";
// 会为 Foo.vue 及其依赖创建单独的一个块
// 它只会按需加载
//（即该异步组件在页面中被渲染时）
// const Foo = defineAsyncComponent(() => import('./Foo.vue'))
